<template>
  <div>
    <center>
      <div class="panel panel-default">
        <div class="panel-body">
            <h2>添加新单词</h2>
            <p>*添加一个新的单词到你的单词列表中</p>
            <form class="form-horizontal" role="form">
              <div class="input-group">
              <label for="word" class="control-label col-xs-3">单词</label>
              <div class="col-xs-9">
              <input type="text" class="form-control" placeholder="填写单词(例:panda)" v-model="word">
              </div>
              </div>
            </form>
            <p>*很多单词往往不止一种词性哦~</p>
            <form class="form-horizontal" role="form">
              <div class="input-group">
              <label for="translate" class="control-label col-xs-3">释义</label>
              <div class="col-xs-9">
              <input type="text" class="form-control translate" v-model="translate" placeholder="填写词性及释义，具有&#10;多个词性的单词则用/分开(例：n.熊猫/adj.向熊猫一样帅)">
              </div>
              </div>
            </form>
            <p>*添加一个例句可以帮您更好的理解单词</p>
            <form class="form-horizontal" role="form">
              <div class="input-group">
              <label for="sentence" class="control-label col-xs-3">例句</label>
              <div class="col-xs-9">
              <input type="text"  class="form-control translate" placeholder="填写关于此单词的一个例句(此项可选)" v-model="sentence">
              </div>
              </div>
            </form>
             <button type='primary' class="btn btn-primary btn-block" @click="handle">提交</button>
        </div>
    </div>
    </center>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import {addCard} from '../../api/index';
export default {
  data(){
    return {
      word:'',
      translate:'',
      sentence:''
    }
  },
  methods:{
    handle(){
      if(this.word===''||this.translate===''){
        Message.warning("单词或释义不能为空");
      }else{
        const data={
        word:this.word,
        translate:this.translate,
        sentence:this.sentence
      };
      addCard(data).then(res=>{
        console.log(res)
        Message.success("单词提交成功");
      })
      }
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  margin: 0;
  padding: 0s
}
.panel{
  width: 300px;
  height: 500px;
  margin-top: 10px;
  margin-bottom: 30px;
  color:teal;
}
p{
  margin-top: 30px;
}
label{
  margin-top: 8px;
}
.translate{
  height: 70px;
}
button{
  height: 44px;
  width: 200px;
  margin-top: 40px;
}
</style>
